<template>
  <main>
    <el-tabs v-model="activeName">
      <el-tab-pane label="密码登录" name="first">
        <PassLogin
          key="pass"
          v-bind="$attrs"
          @submitForm="submitForm"
          @beforeLogin="beforeLogin"
        />
      </el-tab-pane>
      <el-tab-pane label="验证码登录" name="second">
        <CodeLogin
          key="code"
          v-bind="$attrs"
          @beforeLogin="beforeLogin"
          @submitForm="submitForm"
        />
      </el-tab-pane>
    </el-tabs>
  </main>
</template>

<script>
import PassLogin from './LoginWebNormal.vue';
import CodeLogin from './LoginWebCode.vue';
import { getRSAKey, getToCloudUrl } from 'api/modules/login.api';

export default {
  name: 'LoginWeb',
  data() {
    return {
      activeName: 'first',
    };
  },
  components: {
    PassLogin,
    CodeLogin,
  },
  props: {
    useLoginSuccessMsg: {
      type: Boolean,
      default: true,
    },
  },
  created() {
    // 获取RSkey
    this.handleRSAKey();
    getToCloudUrl()
      .then((res) => {
        if (res.code === 0) {
          this.globalProcessData.setUrl(res.data);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    // 统一处理登录信息
    submitForm(data) {
      if (data.code === 0 && this.useLoginSuccessMsg) {
        this.$message.success('登录成功');
      }
      this.$emit('afterLogin', data);
    },
    // 传递登录前的请求参数
    beforeLogin(data) {
      this.$emit('beforeLogin', data);
    },
    /**
     * 获取钥匙
     */
    async handleRSAKey() {
      const params = {
        data: {},
      };
      const { code, data } = await getRSAKey(params);
      if (code !== 0 || !data) {
        this.$message.error('系统异常，请刷新重试！');
        return;
      }
      this.$emit('getPublicKey', data);
      console.log('this', this.globalProcessData);

      this.globalProcessData.setPublicKey(data);
    },
  },
};
</script>

<style lang="less" scoped>
::v-deep {
  .el-tabs__item {
    font-size: 16px;
  }
  .el-tabs__header {
    margin: 0 0 22px;
  }
  .el-tabs__item.is-active {
    font-weight: Bold;
    font-size: 16px;
    color: #0080ff;
  }
  .el-tabs__nav-wrap::after {
    width: 0;
  }
  .el-tabs__active-bar {
    height: 3px;
    background: #0080ff;
    border-radius: 1px;
  }
  .el-input__inner {
    border-radius: 8px;
    line-height: 1px !important;
  }
  .el-input__suffix {
    color: #47c23a;
  }
  .el-button--primary {
    width: 100%;
    border-radius: 8px;
  }
  .el-form-item {
    margin-bottom: 20px;
  }
  .el-checkbox__input.is-checked {
    .el-checkbox__inner {
      background-color: #0080ff;
      border-color: #0080ff;
    }
    + .el-checkbox__label {
      color: #0080ff;
    }
  }
  .el-tabs__item {
    color: #606266;
  }
}
</style>
<style lang="less">
input[type='number'] {
  -moz-appearance: textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
</style>
